.link {
    display: block;
    padding:
        calc(var(--nav-tabs-padding-v) + var(--nav-tabs-border-width))
        var(--nav-tabs-padding-h)
        var(--nav-tabs-padding-v);
    color: var(--main-color);
    border-top-left-radius: var(--nav-tabs-radius);
    border-top-right-radius: var(--nav-tabs-radius);
    border-bottom: var(--nav-tabs-border-width) solid transparent;
    margin-bottom: calc(0px - var(--nav-tabs-border-width));
    transition: color var(--transition-medium), border-bottom-color var(--transition-medium);

    &.active {
        color: var(--link-hover-color);
        border-bottom-color: var(--link-hover-color);
        background: var(--main-bg-dark);
    }

    &:hover {
        color: var(--link-hover-color);
        border-bottom-color: var(--link-hover-color);
        transition: color var(--transition-instant), border-bottom-color var(--transition-instant);
    }

    &:focus-visible {
        outline: none;
        margin: -3px;
        border: 3px solid var(--yellow500);
        position: relative;
        transition: border-bottom-color var(--transition-instant);
        z-index: 1;
    }

    @media only screen and (max-width: 550px) {
        padding:
            var(--nav-tabs-padding-v)
            var(--nav-tabs-padding-h)
            var(--nav-tabs-padding-v)
            calc(var(--nav-tabs-padding-h) + var(--nav-tabs-border-width));

        border-top-left-radius: 0;
        border-bottom-right-radius: var(--nav-tabs-radius);
        border-bottom: none;
        border-left: var(--nav-tabs-border-width) solid transparent;
        margin-bottom: 0;
        margin-left: calc(0px - var(--nav-tabs-border-width));

        &.active,
        &:hover {
            border-left-color: var(--link-hover-color);
        }
    }
}
